import Animator from '@ohos.animator';

export default {
    data: {
        themeColor:"#1E90FF",
        requestId: 0,
        timestampStr: "",
        animator: null,
        divWidth: 150,
        divHeight: 150,
    },
    beginAnimation() {
        cancelAnimationFrame(this.requestId);
        this.requestId = requestAnimationFrame(this.runAnimation);
    },
    runAnimation(timestamp) {
        if (this.startTime == 0) {
            this.startTime = timestamp;
        }
        this.timestampStr = timestamp
        console.log('callback handler timestamp: ' + timestamp);
        this.requestId = requestAnimationFrame(this.runAnimation);
    },
    stopAnimation() {
        cancelAnimationFrame(this.requestId);
    },
    createAnimatorCall() {
        const context = this
        var options = {
            duration: 1500,
            easing: 'friction',
            fill: 'forwards',
            iterations: 2,
            begin: 150.0,
            end: 300.0
        };
        this.animator = Animator.createAnimator(options);
        this.animator.onframe = function (value) {
            context.divWidth = value;
            context.divHeight = value;
        };
    },
    updateAnimatorCall() {
        const context = this
        var options1 = {
            duration: 2000,
            easing: 'friction',
            fill: 'forwards',
            iterations: 1,
            begin: 200.0,
            end: 350.0
        };
        this.animator && this.animator.update(options1);
        this.animator.onframe = function (value) {
            context.divWidth = value;
            context.divHeight = value;
        };
    },
    playCall() {
        this.animator && this.animator.paly()
    },
    finishCall() {
        this.animator && this.animator.finish()
    },
    pauseCall() {
        this.animator && this.animator.pause()
    },
    cancelCall() {
        this.animator && this.animator.cancel()
    },
    reverseCall() {
        this.animator && this.animator.reverse()
    }
}